<template>
  <view>
    <tki-tree
      ref="tkitree"
      :select-parent="selectParent"
      :multiple="multiple"
      :range="dataList"
      :fold-all="flodAll"
      :id-key="idKey"
      :range-key="label"
      :loading="loading"
      confirm-color="#007AFF"
      cancel-color="#888888"
      is-tree
      @confirm="comfirm"
      @cancel="cancel"
    />
    <My-Base :is-show-icon-arrow="isShowIconArrow" :icon="icon">
      <template #header>
        <view>
          {{ title || '时间选择器标题' }}
        </view>
      </template>

      <template #content>
        <view class="timer-row">
          <view class="timer-content" @click="open">
            <view v-if="isArray(sohwLabel)">
              <view v-for="item in sohwLabel" :key="item">
                {{ item }}
              </view>
            </view>

            <view v-else>
              {{ sohwLabel }}
            </view>
          </view>

          <u-icon
            v-show="value && !disabled"
            color="#C0C4CC"
            name="close-circle-fill"
            :size="34"
            @click="upDate('')"
          />
        </view>
      </template>
    </My-Base>
  </view>
</template>

<script>
import MyBase from 'common/formComponent/MyBase';
import TkiTree from '@/components/tki-tree/tki-tree.vue';
import { isArray } from '@/pages/statistic/commonMethods.js';

export default {
  name: 'MySelect',

  components: {
    MyBase,
    TkiTree
  },

  model: {
    prop: 'value',
    event: 'update:value'
  },

  props: {
    /*
      {
        checked: true // 默认选中
      }
    */
    dataList: { // 数据
      type: Array,
      default: () => []
    },

    // 是否树形结构展示
    isTree: {
      type: Boolean,
      default: false
    },

    loading: {
      type: Boolean,
      default: false
    },

    idKey: {
      type: String,
      default: 'id'
    },

    label: {
      type: String,
      default: 'name'
    },

    multiple: {
      type: Boolean,
      default: false
    },

    selectParent: {
      type: Boolean,
      default: false
    },

    // 全展开？
    flodAll: {
      type: Boolean,
      default: false
    },

    title: {
      type: String,
      default: ''
    },

    placeholder: {
      type: String,
      default: '请选择'
    },

    disabled: {
      type: Boolean,
      default: false
    },

    value: {
      type: [String, Number, Array],
      default: ''
    },

    valueKey: {
      type: String,
      default: 'id'
    },

    icon: {
      type: String,
      default: '' // moments
    },

    isShowIconArrow: {
      type: Boolean,
      default: true
    }

  },

  computed: {
    getShowLabel() {
      const selectedItem = this.dataList.find(item => {
        return item[this.valueKey] === this.value;
      });

      if (selectedItem) {
        return selectedItem[this.label];
      }

      return '';
    },

    sohwLabel() {
      return this.getShowLabel || this.value || this.placeholder;
    }
  },

  methods: {
    isArray,

    open() {
      if (!this.disabled) {
        this.$refs.tkitree._show();
        this.$emit('open');
      }
    },

    comfirm(e) {
      this.$emit('change', e);
      this.changeData(e);
    },

    changeData(value) {
      const { multiple, valueKey: key } = this;

      if (multiple) {
        this.changeInMultiple(value, key);
      } else {
        this.changeInSingle(value, key);
      }
    },

    // 多选
    changeInMultiple(values, key) {
      const data = values.map(o => o[this.valueKey]);
      this.upDate(data);
    },

    // 单选
    changeInSingle(values, key) {
      const [value] = values;
      this.upDate(value[key]);
    },

    cancel() {},

    upDate(value) {
      this.$emit('update:value', value);
    }
  }
};
</script>

<style lang="scss" scoped>
.timer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .timer-content {
    flex: 1;
  }
}
</style>
